<template>
  <a-form layout="inline" @keyup.enter.native="onSearch">
    <a-row :gutter="24">
      <a-col :md="6" :sm="12" v-for="(item,index) in formList" :key="index">
        <form-item v-model="formData[item.prop]" :itemOptions="item"></form-item>
      </a-col>
      <template v-if="toggleSearchStatus">
        <a-col :md="6" :sm="12" v-for="(item,index) in formListTow" :key="index+2">
          <form-item v-model="formData[item.prop]" :itemOptions="item"></form-item>
        </a-col>
      </template>
      <a-col :md="6" :sm="8">
        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
          <a-button type="primary" @click="onSearch" icon="search">查询</a-button>
          <a-button type="primary" @click="onReset" icon="reload" style="margin-left: 8px">重置</a-button>
          <a v-if="formOptions.length>2" @click="handleToggleSearch" style="margin-left: 8px">
            {{ toggleSearchStatus ? '收起' : '展开' }}
            <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
          </a>
        </span>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import FormItem from './FormItem'
export default {
  name: 'SelectForm',
  components: { FormItem },
  props: {
    formOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      formData: {},
      itemOptions: {},
      toggleSearchStatus: false
    }
  },
  computed: {
    //利用vue的计算属性，过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
    formList: function() {
      return this.formOptions.filter(function(item, index) {
        if (index < 2) {
          return item
        }
      })
    },
    formListTow: function() {
      return this.formOptions.filter(function(item, index) {
        if (index > 1) {
          return item
        }
      })
    }
  },
  created() {
    this.addInitValue() // 添加初始值
  },
  methods: {
    // 添加初始值
    addInitValue() {
      const obj = {}
      this.formOptions.forEach(v => {
        if (v.initValue !== undefined) {
          obj[v.prop] = v.initValue
        }
      })
      this.formData = obj
      //console.log("添加的初始值：",this.formData[this.formOptions[0].prop])
    },
    onSearch() {
      //console.log("搜索",this.formData)
      this.$emit('onSearch', this.formData)
    },
    onReset() {
      this.formData = {}
      this.$emit('onSearch', this.formData)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    }
  }
}
</script>
<style>
</style>